<template>
  <el-card class="box-card">
    <div>全部评论</div>
    <div class="content">
      <div class="loading" v-if="$store.state.moment.momentList.length===0">
        <div> <img src="@/assets/images/noComment.d76611a1.png" alt="">
          <div class="text">还没有评论成为第一个评论的人！</div>
        </div>
      </div>
      <commentMain v-else :list="$store.state.moment.momentList" />
    </div>
    <div class="edit">
      <div style="border: 1px solid #ccc;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 150px; overflow-y: hidden;" v-model="content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
      </div>
      <div class="btn">
        <div></div>
        <el-button type="primary" @click="submitFn">发布评论</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import Vue from 'vue'
import commentMain from './commentMain.vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import excludeKeys from '../excludeKeys'
import { insert } from '@/api/comment'
export default Vue.extend({
  components: {
    Editor,
    Toolbar,
    commentMain
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      content: '',
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    this.toolbarConfig = {
      excludeKeys
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    submitFn() {
      const post_Id = this.$route.params.id
      if (this.content.trim() === '') {
        return
      }
      const postId = this.$route.params.id
      const userId = this.$store.state.user.profile.userId
      const data = {
        postId,
        userId,
        content: this.content
      }
      insert(data).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.content = ''
          this.$store.dispatch('moment/getCommentListFn', post_Id)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 5px;
}
.top {
  .person {
    display: flex;
    align-items: center;

    .right {
      padding: 5px;
      flex: 1;
      margin-left: 5px;
      border-bottom: 1px solid #c3c3c3;
      color: #c3c3c3;
      .name {
        font-weight: 700;
        color: black;
      }
    }
  }
}
.content {
  .loading {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #cccc;
    .text {
      padding-top: 10px;
      color: #cccc;
    }
  }
}
.edit {
  // height: 200px;
  padding-top: 10px;
  // border-top: 1px solid #c3c3c3;
  .btn {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>